<template>
  <div class="personal-info-container">
    <el-card class="info-card">
      <template #header>
        <span>个人信息详情</span>
      </template>

      <!-- 基本信息展示 -->
      <div class="info-header">
        <el-avatar :size="100" class="avatar">
          <img :src="user.avatar"/>
        </el-avatar>
        <div class="info-header-text">
          <h2>{{ user.name }} <span class="role-tag">{{ formatRole(user.role) }}</span></h2>
          <p class="user-id">账号ID: {{ user.accountId || '未设置' }}</p>
        </div>
        <el-button type="primary" @click="isEditing = true">编辑信息</el-button>
      </div>

      <!-- 详细信息列表 -->
      <el-descriptions column="1" border class="info-details">
        <el-descriptions-item label="真实姓名">{{ user.realName || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <template #default>
            {{ user.idCard ? maskIdCard(user.idCard) : '未设置' }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="手机号">{{ user.mobile || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ user.createTime || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="最后登录">{{ user.lastLogin || '从未登录' }}</el-descriptions-item>
        <el-descriptions-item label="账号状态">
          <el-tag type="success">{{ user.status === 'active' ? '正常' : '禁用' }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 编辑信息弹窗 -->
    <el-dialog title="编辑个人信息" v-model="isEditing" width="500px">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="真实姓名">
          <el-input v-model="editForm.realName" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.mobile" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" clearable></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="isEditing = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useLoginStore } from '../../../../stores/index.js';
import { ElMessage } from 'element-plus';

const loginStore = useLoginStore();
const user = loginStore.user;
const isEditing = ref(false);
const editForm = ref({});

// 初始化编辑表单
onMounted(() => {
  // 复制用户信息到编辑表单
  editForm.value = {
    realName: user.realName || '',
    mobile: user.mobile || '',
    email: user.email || ''
  };
});

// 格式化角色
const formatRole = (role) => {
  const roleMap = {
    'parent': '家长',
    'teacher': '教师',
    'student': '学生',
    'school': '学校管理员',
    'platform': '平台管理员'
  };
  return roleMap[role] || role;
};

// 身份证号脱敏
const maskIdCard = (id) => {
  return id.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3');
};

// 保存编辑
const saveEdit = () => {
  // 模拟保存到本地存储
  Object.assign(user, editForm.value);
  localStorage.setItem('userInfo', JSON.stringify(user));
  ElMessage.success('信息修改成功');
  isEditing.value = false;
};
</script>

<style scoped>
.personal-info-container {
  padding: 20px;
}

.info-card {
  max-width: 800px;
  margin: 0 auto;
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.avatar {
  background-color: #00B4A0;
  font-size: 40px;
}

.info-header-text {
  flex: 1;
  margin-left: 20px;
}

.role-tag {
  font-size: 14px;
  background-color: #e6f7ff;
  color: #00B4A0;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 10px;
}

.user-id {
  color: #666;
  margin: 5px 0 0;
}

.info-details {
  margin-top: 20px;
}

.el-descriptions__label {
  background-color: #f5f7fa;
  font-weight: 500;
}
</style>